<!-- 
	date:2022-08-18
	author:xiaoya
	desc:用于绩效统计页面
 -->
<template>
	<view>
		<view class="tree-wrapp" >
			<view class="tree-item" v-for="(item,index) in tree" :key="index" >
				<!-- <view v-if="item.isNode === false" style="height: 20rpx;"></view> -->
				<view class="head" :class="[
					{'head_contentBg':item.isNode === false},
					{'head_contentBgPerson':item.isNode === false && acts === 2},
					{'head_contentLen':item.floor === 1 && item.signTypeName == lastStr},
					{'head_contentLenTwo':item.floor === 2},
					{'head_contentLenThree':item.floor === 3 && item.isNode !== false},
				]" @click.stop="changeShow(item)" >
					<view :class="item.isNode !== false && !item.list ?'left_sing left_singBg':'left_sing'" v-if="item.signTypeName && item.isNode !== false">
						<text></text>
					</view>
					<!-- {{arrLen}} -->
					<view class="head_content" :class="{
						'head_contentTwo':item.floor === 2,
						'head_contentThree':item.floor === 3 && item.isNode !== false,
						
					}" v-if="dayStatus === 1"> 
						<view class="content_L" :style="{color:item.isNode !== false && !item.list ?'#999':''}" >
							<text v-if="item.isNode !== false" :class="{
								isColor:item.floor == 2 || item.floor == 3,
								isColorCheck:item.floor == 1 && isOpen(item.id),
								isColorCheckTwo:item.floor == 2 && isOpen(item.id),
								isColorCheckThree:item.floor == 3 && isOpen(item.id) && item.isNode !== false,
								}" >
							{{ item.signTypeName || item.userName || item.deptName}}
							</text>
							<text v-if="item.isNode === false" class="content_isNodeL" >{{ item.date }}</text>
						</view>
						<view class="content_R" :class="{
							content_isNodeR:item.isNode === false && !item.list,
							content_isNodeColor:item.isNode !== false && !item.list,
							}" >
							<text :class="{
								isColor:item.floor == 2 || item.floor == 3,
								isColorCheck:item.floor == 1 && isOpen(item.id),
								isColorCheckTwo:item.floor == 2 && isOpen(item.id),
								isColorCheckThree:item.floor == 3 && isOpen(item.id) && item.isNode !== false,
								}" >
							{{ item.msg }}
							</text>
						</view>
					</view>
					<view class="head_content" :class="{
						'head_contentTwo':item.floor === 2,
						'head_contentThree':item.floor === 3 && item.isNode !== false,
						
					}" v-if="dayStatus === 2">
						<view class="content_L" :style="{color:item.isNode !== false && !item.list ?'#999':''}">
							<text v-if="item.isNode !== false" :class="{
								isColor:item.floor == 2 || item.floor == 3,
								isColorCheck:item.floor == 1 && isOpen(item.id),
								isColorCheckTwo:item.floor == 2 && isOpen(item.id),
								isColorCheckThree:item.floor == 3 && isOpen(item.id) && item.isNode !== false,
								}" >
							{{ item.signTypeName || item.userName || item.deptName}}
							</text>
							<text v-if="item.isNode === false" class="content_isNodeL" >{{ item.userName}}</text>
						</view>
						<view class="content_R" :class="{
							content_isNodeR:item.isNode === false && !item.list,
							content_isNodeColor:item.isNode !== false && !item.list,
							}" >
							<text :class="{
								isColor:item.floor == 2 || item.floor == 3,
								isColorCheck:item.floor == 1 && isOpen(item.id),
								isColorCheckTwo:item.floor == 2 && isOpen(item.id),
								isColorCheckThree:item.floor == 3 && isOpen(item.id) && item.isNode !== false,
								}" >
							{{ item.msg || "0人" }}
							</text>
						</view> 
					</view>
					<view class="right-check" v-if="(item.list && item.list.length > 0 ) || (item.signTypeName && item.isNode !== false)">
						<text :style="{transform:isOpen(item.id)?'rotate(135deg)':'rotate(-45deg)'}"></text>
					</view>
					<view style="width: 42rpx;" v-else>
					</view>
				</view>
				<view class="" >
				<view :class="isHeight===false?'contentHeight':'content'" v-if="item.list && item.list.length > 0" v-show="isOpen(item.id)">
					
					<treeNodesSign :dayStatus="dayStatus" :tree="item.list" :isHeight="item.isNode" :expandedIds="expandedIds" @node-click="$emit('node-click', $event)"></treeNodesSign>
				</view>
				</view>
				
			</view>
		</view>
	</view>
	
</template>

<script>
import treeNodesSign from './tree-nodesSign.vue';
export default {
	name: 'treeNodesSign',
	// componentName: 'treeNodes',
	components:{
		treeNodesSign
	},
	props:{
		tree:{
			type:[Array,Object],
		},
		dayStatus:{// 用于区分 日跟周月树形数据1周月 2日
			type:Number,
			default:1,
		},
		acts:{// 按组按人样式区别
			type:[String,Number],
			default:'',
		},
		lastStr:{
			type:String,
			default:'',
		},
		isHeight:{// 用于最后一级高度固定
			type:Boolean,
			default:true,
		},
		
		signTypeName:{
			type:String,
			default:'',
		},
		expandedIds:{
			type:Array,
			default:[]
		}
	},
	data() {
		return {
			// expandedIds:[],
			checkArr:[],
		};
	},
	watch:{
	},
	created() {
	},
	computed: {
		
	},
	methods: {
		isOpen(id) {// 判断节点id在不在数组中
			return this.expandedIds.includes(id);
		},
		changeShow(item) {
			if (item.list && item.list.length) {// 判断是否有子级
				let index = this.expandedIds.indexOf(item.id); 
				if (index != -1) {
				  this.expandedIds.splice(index, 1);
				} else {
				  this.expandedIds.push(item.id);
				}
				if (item.isNode === false) {
					console.log('isNodeisNode',item);
				}
			} else {
				let openstatus = item.isOpen;
				item.isOpen = !openstatus;// 是否勾选
			}
			this.$emit('node-click',item);
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
@mixin animate2 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.tree-wrapp{ 
	
}
.tree-item {
	// padding: 10rpx 0rpx;
	// padding-left: 10rpx;
	background-color: #fff;
	// margin-bottom: 20rpx;
	// margin-top: 16rpx;
	.head {
		display: flex;
		align-items: center;
		
		height: 84rpx;
		line-height: 84rpx;
		border-bottom: 2rpx #e9e9e9 solid;
		// padding-bottom: 15rpx;
		// padding-top: 15rpx;
		margin-bottom: 10rpx;
		z-index: 99;
		.left_sing{
			text:nth-of-type(1){
				display: inline-block;
				border-width: 12rpx;
				border: 2rpx #0091FF solid;
				height: 20rpx;
			}
		}
		.left_singBg{
			text:nth-of-type(1){
				border: 2rpx #999999 solid;
			}
		}
		.head_content {
			flex: 1;
			margin-left: 20rpx;
			font-size: 28rpx;
			
			color: #333;
			display: flex;
			z-index: 99;
			.content_L{
				flex: 0 0 180rpx;
				
			}
			.content_R{
				flex: 1;
				text-align: right;
				margin-right: 20rpx;
			}
			.content_isNodeR{
				margin-right: -15rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}
			.content_isNodeL{
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}
			.content_isNodeColor{
				color: #999;
			}
			.isColor{
				font-size: 24rpx;
				color: #666;
				font-weight: 400;
				
			}
			.isColorCheck{
				font-weight: 700;
				
			}
			.isColorCheckTwo{
				font-weight: 700;
				color: #666666;
			}
			.isColorCheckThree{
				font-weight: 700;
				color: #666666;
			}
		}
		
		.head_contentTwo {
			margin-left: 0;
		}
		.head_contentThree {
			margin-left: 0;
		}
		
	}
	// .head:last-child{
	// 	border-bottom:none;
	// }
	.head_contentBg{
		z-index: 102;
		background: #f6f6f6;
		border-radius: 4rpx;
		border-bottom:none;
		margin-bottom: 0rpx;
		// margin-left: 15rpx;
		height: 70rpx;
		// margin-left: 20rpx;
	}
	.head_contentBgPerson{
		z-index: 102;
		background: #f6f6f6;
		border-radius: 4rpx;
		border-bottom:none;
		margin-bottom: 0rpx;
		height: 70rpx;
	}
	.head_contentLen{
		border-bottom:none;
	}
	.head_contentLenTwo{
		width: 650rpx;
		margin-left: 20rpx;
	}
	.head_contentLenThree{
		margin-left: 20rpx;
		// padding-left: 20rpx;
		// padding-right: 20rpx;
	}
	
	.right-ifon {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(-90deg);
	}
	.right-check{
		margin-right: 16rpx;
		// width: 30rpx;
		// height: 30rpx;
		// border-radius: 50%;
		// border: 2rpx #CCCCCC solid;
		text{
			display: block;
			width: 12rpx;
			height: 12rpx;
			border-left: 2rpx #CCCCCC solid;
			border-bottom: 2rpx #CCCCCC solid;
			transform: rotate(-45deg);
			transition:all 0.3s linear;
		}
	}
	.right-bg{
		// background-color: #0091FF;
		border: none;
		background: url("");
	  background-size:32rpx 32rpx;
	  background-repeat:no-repeat;
	}
	.left-icon {
		margin-right: 16rpx;
		width: 22rpx;
		height: 22rpx;
		@include animate2;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		&.rt45 {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
		}
	}
	.content {
		padding-left: 10rpx;
		
	}
	.contentHeight{
		
		    padding-left: 10rpx;
		    max-height: 500rpx;
		    overflow-y: scroll;
		    margin-left: 10rpx;
	}
	
}
</style>
